<template>
  <div class="">
    <h2>首页</h2>
    <searchemit
      @update:value="handleValueUpdate"
      @submit="handleSubmit"
    ></searchemit>
    <p>接收的值: {{ receivedValue }}</p>
    <p>提交状态: {{ submitStatus }}</p>

    <!-- expose的用法 -->
     <defineexpose ref="childRef"></defineexpose>
     <button @click="handleExpose">暴露方法和属性</button>

<!-- definemodel的用法 -->
   <definemodel v-model:count="countNumber"></definemodel>


  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import searchemit from "@/views/home/searchemit/searchemit.vue";
import defineexpose from "../defineexpose/defineexpose.vue";
import definemodel from "../definemodel/definemodel.vue";
const receivedValue = ref("");
const submitStatus = ref("");
const demo = ref(1);

const handleValueUpdate = (value: string) => {
  receivedValue.value = value;
};

// 定义与子组件匹配的类型
type SubmitPayload = {
  id: number;
  status: string;
};
const handleSubmit = (payload: SubmitPayload) => {
  submitStatus.value = `ID: ${payload.id}, Status: ${payload.status}`;
};


//=======================defineexpose用法
const childRef=ref<InstanceType<typeof defineexpose>| null>(null)
const handleExpose=()=>{
  childRef.value?.increament()
   console.log('子组件计数值:', childRef.value?.counts); // 访问子组件的暴露属性
}

//==========================definemodel用法
const countNumber = ref(1) 

</script>
<style lang="less" scoped></style>
